<template>
	<view class="content">
		<view class="page">
			<!-- swiper 轮播图 -->
			<view class="SWIPER">
				<u-swiper :imgMode="'aspectFit'" :list="list" :height="400" :border-radius="0"></u-swiper>
			</view>
			<!-- 操作按钮 -->
			<view class="menu">
				<view class="item" v-for="(item,index) in List_two" :key="index" @click="clickFun(item,index)">
					<view class="icon">
						<u-icon :name="item.icon" color="#000" :size="40"></u-icon>
					</view>
					<view class="text">
						{{ item.label }}
					</view>
				</view>
			</view>
			<!-- 视频 -->


			<!-- 品牌推荐 -->
			<view class="P">
				<view class="P_title cl b_b ">
					品牌推荐
				</view>
				<!-- 内容 -->
				<view class="P_content">
					<u-lazy-load @click="clickPP(item)" style="width: 340rpx;margin-bottom: 10rpx;" :height="'200'"
						border-radius="15" v-for="(item, index) in P_list" :key="index" :image="item.src"></u-lazy-load>
				</view>
			</view>

			<!-- 关于我们 -->
			<!-- <view class="us">
				<view class="P_title cl b_b ">
					关于我们
				</view>
				<u-image width="100%" mode="widthFix" :src="usimage" class="usimage" v-if="usimage"></u-image>
			</view> -->

			
		</view>
	</view>
</template>

<script>
	import {
		List_two,
		url
	} from '@/common/index.js'
	import {
		getSwiper,
		getBrand,
		getVideo,
		getIcon,
		getBg
	} from "@/common/api.js"
	export default {
		data() {
			return {
				list: [], // 轮播图
				List_two: List_two, // 操作按钮
				vodeoSrc: "", // 视频
				P_list: [], // 品牌推荐
				usimage: "", //关于我们
			}
		},
		created() {
			this.getSwiperList() // 轮播图
			this.getVideoUrl() // 视频
			this.getBrand() //案例
			this.getIcon() //案例
			this.getBg() //关于我们
		},
		methods: {
			toVedio() {
				uni.navigateTo({
					url: '/pages/shipin?url=https://v.qq.com/x/page/b3566d2rxgw.html'
				})
			},
			async getSwiperList() {
				let data = await getSwiper()
				this.list = data.rows.map(res => {
					return {
						image: url + res.slPic,
						title: res.slName
					}
				})
			},
			async getBrand() {
				let data = await getBrand()
				data.rows.forEach(item => {
					item.src = url + item.caPic
				})
				this.P_list = data.rows
			},
			// 
			async getVideoUrl() {
				let data = await getVideo(0)
				if (data.code == 200 && data.rows.length > 0) {
					this.vodeoSrc = url + data.rows[0].viUrl
				}
			},
			async getIcon() {
				let data = await getIcon(1)
				console.log(data);
			},
			// 查询关于我们
			async getBg() {
				let data = await getBg(127)
				this.usimage = url + data.rows[0].baUrl
			},
			clickFun(item, index) {
				let url;
				if (item.label == "质保录入") {
					url = "/pagesIndex/index/enterLogin"
				} else if (item.label == '质保查询') {
					url = "/pagesIndex/index/enterQuery"
				} else if (item.label == '案例中心') {
					url = "/pagesIndex/case/case"
				} else if (item.label == '报价查询') {
					url = "/pagesIndex/quotation/index"
				}
				uni.navigateTo({
					url
				})
			},
			// 点击品牌推荐
			clickPP(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pagesIndex/common/page?item=" + JSON.stringify(item) + "&type=" + 1
				})
			}
		}
	}
</script>

<style>
	.content {
		padding: 0 30rpx 30rpx;
		background: #222;
	}

	/* // 菜单 */
	.menu {
		color: #fff;
		display: flex;
		padding: 30rpx 0;
	}

	.item {
		flex: 1;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: #C49266;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text {
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #C49266;
	}

	.P {
		margin-top: 30rpx;
	}

	.us {
		margin-top: 25rpx;
		display: flex;
		flex-direction: column;
	}


	/* 品牌推荐 */
	.P_title {
		padding-left: 30rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #C49266;
	}

	.usimage {
		margin-top: 30rpx;
	}

	.P_content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	/deep/ uni-swiper .uni-swiper-wrapper {
		background-color: #222 !important;
	}

	/deep/.uni-swiper {
		background-color: #222 !important;
	}

	/deep/ .u-wrap {
		background-color: #222 !important;
	}
</style>